<template>
    <div>
        <div class="bg-img" v-if="state">
            <img src="../../assets/img/Chapter/4@3x.png" alt="">
        </div>
        <div class="Chapter" v-if="!state">
            <div class="head">
                <div class="body">
                    <div class="img">
                        <!--<img src="../../assets/img/BookShelf/chang1.png" alt="">-->
                        <img :src="items.book_detail.book_cover" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{items.book_detail.book_name}}</div>
                        <div class="span">
                            <!--<span>共{{items.book_detail.chapter_count}}讲</span>-->
                            <span><i class="icon iconfont icon-yueduliang" style="position: relative;top:.1rem"></i> {{items.book_detail.read_total>100?items.book_detail.read_total:items.book_detail.book_id+2}}阅读</span>
                            <span><i class="icon iconfont icon-shoucangliang" style="position: relative;top:.1rem"></i> {{items.book_detail.collection_total>100?items.book_detail.collection_total:items.book_detail.book_id}}收藏</span>
                            <!--<span class="read"><i class="icon iconfont icon-yueduliang" style="position: relative;top:.1rem"></i> {{items.book_detail.read_total>100?items.book_detail.read_total:items.book_detail.book_id+2}}阅读</span><span class="collection"><i class="icon iconfont icon-shoucangliang" style="position: relative;top:.1rem"></i> {{items.book_detail.collection_total>100?items.book_detail.collection_total:items.book_detail.book_id}}收藏</span></div>-->
                        </div>
                        <div class="book-add" v-if="reading_vip_state ===1 && collection_state ===0" @click="add">
                            <span>添加到书架</span> <i class="iconfont icon-tianjia"></i>
                        </div>
                        <div class="book-not-add" v-if="reading_vip_state === 1 && collection_state ===1">
                            <span>已添加</span> <i class="iconfont icon-yitianjia"></i>
                        </div>
                        <div class="book-not-add" v-if="reading_vip_state === 0">
                            <btn :obj="btnstyles" :text="btntexts" v-on:statr="go('BuyVip')"></btn>
                        </div>
                    </div>
                </div>
                <div class="doc doc-desc" ref="doc">
                    {{detailShow?items.book_detail.book_desc:book_desc_little}}
                </div>
                <div class="detail" v-if="!detailShow" @click="switchDetail">
                    查看详情 <i class="icon iconfont icon-zhankai"></i>
                </div>
                <div class="detail" v-if="detailShow" @click="switchDetail">
                    收起详情 <i class="icon iconfont icon-shouqi"></i>
                </div>
            </div>
            <Chapterout v-if="outpopup" v-on:Punch="Punch" v-on:closed="closed"></Chapterout>
            <div class="blank"></div>
            <div class="activity" @click="goRecommend" v-if="recommend_info.recommend_name">
                <span class="activity-desc"><i class="icon iconfont icon-tongzhi"></i> {{recommend_info.recommend_name}}</span>
                <span class="activity-tip"> <i class="icon iconfont icon-jinru"></i></span>
            </div>
            <div class="blank"></div>
            <div class="list">
                <div class="body" :style="{'color':(a.test_fraction !== 0.0?'#909099':'#2a2a33')}"
                     v-for=" a in chapters"
                     @click="goPlaying(a)">
                    <div class="seq"><span v-if="a.chapter_no <10">0</span>{{a.chapter_no}}</div>
                    <div class="name" style="-webkit-box-orient:vertical">{{a.chapter_name}}</div>
                    <div class="doc" :style="{'color':(a.test_fraction !== 0.0?'#909099':'#2a2a33')}">
                        <div>
                            <span v-if="reading_vip_state===1&&a.test_status!==0">{{a.test_fraction}}分</span>
                            <!--<span v-if="reading_vip_state===1&&a.test_status===0" class="Unread">未阅读</span>-->
                            <span v-if="reading_vip_state===0&&a.is_free!==0">立即试读</span>
                            <span v-if="reading_vip_state===0&&a.is_free===0"><i
                                    class="iconfont icon-suoding"></i></span>
                            <i class="iconfont icon-jinru" style="color: #ccc"></i></div>
                    </div>
                </div>
            </div>
            <infinite-loading @infinite='infiniteHandler' ref="infiniteLoading">
        <span slot="no-more">

        </span>
            </infinite-loading>
        </div>
    </div>
</template>

<script>
    import btn from '../../components/btn/index'
    import Chapterout from '../../components/Chapterout/index'
    import {Toast} from 'mint-ui'
    import $ from 'jquery'
    // import {mapState} from 'vuex'
    import InfiniteLoading from 'vue-infinite-loading';

  export default {
    name: 'index',
    data: function () {
      return {
        detailShow: false,
        textbtn: '立即开始阅读',
        // 0 未读 1 已读
        collection_state: 0,
        btnstyles: {
          backgroundColor: '#ffd000',
          color: '#66440a',
          width: '16rem',
          height: '4rem',
          borderRadius: '5rem',
          opacity: 1,
          boxShadow: '0 8px 24px 0 rgba(255, 208, 0, 0.4)'
        },
        btntexts: '立即加入',
        btnstyle: {
          backgroundColor: '#ffd000',
          width: '80%',
          height: '4rem',
          color: '#66440a',
          boxShadow: '0 8px 24px 0 rgba(255, 208, 0, 0.4)',
          opacity: 1
        },
        state: true,
        chapter: {},
        total: 5,
        data: this.$route.query,
        chapters: [],
        outpopup: false,
        items: {
          book_detail: {
            book_cover: require('../../assets/img/BookShelf/chang1.png'),
            book_name: "",
            chapter_count: 0,
            word_number: 0,
            recommend_word: 0,
            book_desc: ''
          }
        },
        reading_vip_state: -1,
        // 扫码助力
        recommend_info: {}
      }
    },
    mounted: function () {
      if (parseInt(this.data.is_complete) === 1) {
        this.outpopup = true
      }
      if (!this.$route.query.share_id) {
        this.state = false
        this.data.page_index = 0
        // this.update()
        var data = {
          post_id: this.$route.query.book_id,
          share_type: 25,
          share_page: 'Chapter'
        }
        this.share(data)
      } else {
        this.update(this.data)
      }
      // this.manualLoad()
    },
    computed: {
      'book_desc_little': function () {
        if (this.items.book_detail.book_desc.length < 75) {
          return this.items.book_detail.book_desc + '...'
        } else {
          return this.items.book_detail.book_desc.substring(0, 75) + '...'
        }

            }
        },
        methods: {
            update: function (data) {
                this.$axios.share_books(data).then(res => {
                    this.data.book_id = res.data.qing_data
                    this.data.page_index = 0
                    this.state = false
                })
            },
            share: function (data) {
                var obj = {}
                var _this = this
                this.$axios.share_link_info(data).then(res => {
                    var data = {
                        title: res.data.qing_data.title,
                        desc: res.data.qing_data.desc,
                        link: res.data.qing_data.link,
                        imgUrl: res.data.qing_data.img
                    }
                    obj.share_id = res.data.qing_data.share_id
                    obj.share_token = res.data.qing_data.share_token
                    this.$wx.ShareTimeline(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 25
                        _this.share_done(obj)
                    })
                    this.$wx.ShareAppMessage(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 25
                        _this.share_done(obj)
                    })
                    // window.localStorage.setItem('Punch_share_data', JSON.stringify(data))
                    // wx.Author(data)
                })
            },
            share_done: function (obj) {
                var _this = this
                _this.shares = false
                this.$axios.share_done(obj).then(res => {
                    if (res.data.qing_code !== 100) {
                        Toast({
                            message: '分享失败',
                            iconClass: 'iconfont icon-bangdingshibai',
                            duration: 5000
                        })
                    } else {
                        Toast({
                            message: '分享成功',
                            iconClass: 'iconfont icon-tianjiachenggong',
                            duration: 5000
                        })
                    }
                })
            },
            goPlayings: function (i) {
                return this.$router.push({
                    name: 'Playing',
                    query: {book_id: i}
                })
            },
            Continue: function () {
                this.closed()
                // this.goPlaying()
            },
            Punch: function () {
                this.closed()
                this.$router.push({
                    name: 'BookCard',
                    query: {book_id: this.data.book_id}
                })
                // BookCard
                // this.goChapter()
            },
            closed: function () {
                this.outpopup = false
            },
            goPlaying: function (i) {
                var querye = sessionStorage.getItem('querye')
                if (!querye) {
                    querye = {}
                } else {
                    querye = JSON.parse(querye)
                }
                if (i.is_free === 0 && this.reading_vip_state === 0) {
                    this.$router.push({
                        name: 'BuyVip',
                        query: querye
                    })
                } else if (i.is_free === 1 && this.reading_vip_state === 0) {
                    this.$router.push({
                        name: 'Playing',
                        query: Object.assign({book_id: this.$route.query.book_id, chapter_id: i.chapter_id}, querye)
                    })
                } else {
                    this.$router.push({
                        name: 'Playing',
                        query: {book_id: this.$route.query.book_id, chapter_id: i.chapter_id}
                    })
                }
                // return this.$router.push({
                //   name: 'Playing',
                //   query: {book_id: this.$route.query.book_id, chapter_id: i}
                // })
            },
            manualLoad: function () {
                // this.distance = 100;
                this.$nextTick(() => {
                    this.$refs.infiniteLoading.attemptLoad()
                });
            },
            infiniteHandler: function ($state) {
                // 设置多行文本伸缩属性
                this.$refs.doc.style['-webkit-box-orient'] = 'vertical'
                // 将platform_book_id 塞入session中
                if (this.$route.query.platform_book_id) {
                    window.sessionStorage.setItem('ten_platform_book_id', this.$route.query.platform_book_id)
                }
                // 没有 platform_book_id 跳转至首页
                if (!window.sessionStorage.getItem('ten_platform_book_id')) {
                    this.$router.push({
                        name: 'Home'
                    })
                } else {
                    var _this = this
                    ++_this.data.page_index
                    if (_this.data.page_index > _this.total) {
                        $state.complete();
                        return
                    }
                    this.data.platform_book_id = window.sessionStorage.getItem('ten_platform_book_id')
                    this.$axios.book_detail_new(this.data).then(res => {
                        _this.state = false
                        if (res.data.qing_code === 303) {
                            $state.complete();
                            return
                        }
                        if (res.data.qing_data.total) {
                            _this.total = res.data.qing_data.total
                        }
                        if (res.data.qing_data.book_detail) {
                            _this.items = res.data.qing_data
                        }
                        if (res.data.qing_data.is_vip) {
                            _this.reading_vip_state = res.data.qing_data.is_vip
                        }
                        if (res.data.qing_data.collection_state) {
                            _this.collection_state = res.data.qing_data.collection_state
                        }
                        if (res.data.qing_data.recommend_info) {
                            _this.recommend_info = res.data.qing_data.recommend_info
                        }
                        _this.chapters.push.apply(_this.chapters, res.data.qing_data.chapters)
                        $state.loaded();
                    })
                }

            },
            switchDetail: function () {
                this.detailShow = !this.detailShow
                // 0 收起  1展示
                if (this.detailShow === false) {
                    this.$refs.doc.style['-webkit-box-orient'] = 'vertical'
                    $('.doc').addClass('doc-desc')
                } else {
                    this.$refs.doc.style['-webkit-box-orient'] = 'inline-axis'
                    $('.doc').removeClass('doc-desc')
                }
            },
            add: function () {
                // 手动添加platform_book_id
                // this.items.book_detail.platform_book_id = this.$route.query.platform_book_id
                this.items.book_detail.platform_book_id = window.sessionStorage.getItem('ten_platform_book_id')
                this.$axios.books_add(this.items.book_detail).then(res => {
                    if (res.data.qing_code !== 100) {
                        return
                    }
                    // 手动改为已添加
                    this.collection_state = 1
                    Toast({
                        message: '添加成功',
                        iconClass: 'iconfont icon-tianjiachenggong',
                        duration: 2000
                    })
                })
            },
            // 跳转至扫码助力
            goRecommend: function () {
                //根据状态判断是进行富文本展现还是页面跳转  1富文本  2页面跳转
                if (this.recommend_info.addition_type === 2) {
                    window.location.href = this.recommend_info.addition_body
                    // window.location.href = 'https://www.baidu.com'
                } else {
                    this.$router.push({
                        name: 'Recommend',
                        params: {
                            addition_body: this.recommend_info.addition_body
                        }
                    })
                }
            },
            go: function (str) {
                if (str === 'BuyVip') {
                    var querye = sessionStorage.getItem('querye')
                    if (!querye) {
                        querye = {}
                    } else {
                        querye = JSON.parse(querye)
                    }
                    this.$router.push({
                        name: str,
                        query: querye
                    })
                } else {
                    return this.$router.push({
                        name: str
                    })
                }
            }
        },
        components: {btn, Chapterout, InfiniteLoading}
    }
</script>

<style scoped>
    @import "../../assets/css/views/Chapter/index.css";
</style>
